import React from "react";
import { Route, NavLink, Switch, withRouter } from "react-router-dom";

import Header from "./components/Header";
import Home from "./pages/Home/index";
import About from "./pages/About";
import Help from "./pages/Help";
import Detail from "./pages/Detail";

// 问题1：在App组件那里不用link标签，可以用编程式跳转吗
// 回答：App 有没有 history 这个 prop
//       没有，原因是什么？ App 是个 普通组件。没有收到 history location match
//
// 问题2：我就要在 普通组件中 拿到 history location match 怎么办？
// 回答：使用 react-router-dom 的一个名叫 withRouter 的高阶函数包装一下你的普通组件
//
function App(props) {
  console.log("App", props);
  return (
    <div className="app">
      <Header a="1" b="2" />
      <div className="main">
        <div className="left">
          <NavLink className="link" to="/home" activeClassName="hello">
            Home
          </NavLink>
          <NavLink className="link" to="/about" activeClassName="hello">
            About
          </NavLink>
          {/* 
              Link 或 NavLink 默认都是 push 方式的跳转
                  如果添加一个 replace 的属性，那么就会变成 replace 模式
          */}
          <NavLink className="link" replace to="/help" activeClassName="hello">
            Help
          </NavLink>
        </div>
        <div className="right">
          <Switch>
            <Route path="/home" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/help" component={Help} />
            <Route path="/detail/:id" component={Detail} />
          </Switch>
        </div>
      </div>
    </div>
  );
}

export default withRouter(App);
